<template>
    <div style="padding: 30px;">
        <v-dialog
                v-model="dialog"
                max-width="290"
        >
            <v-card>
                <v-card-title class="headline">Use Google's location service?</v-card-title>

                <v-card-text>
                    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>

                    <v-btn
                            color="green darken-1"
                            flat="flat"
                            @click="dialog = false"
                    >
                        Disagree
                    </v-btn>

                    <v-btn
                            color="green darken-1"
                            flat="flat"
                            @click="dialog = false"
                    >
                        Agree
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-layout justify-center>
            <v-flex xs10>
                <div style="border-radius: 5px;border: 1px solid rgb(234,237,243);overflow: hidden;background-color: white">
                    <v-layout row style="height: 85px;padding-left: 30px;padding-right: 30px" align-center>
                        <div style="font-size: 18px;font-weight: 500;color: rgb(62,63,66)">您的通知</div>
                        <v-spacer></v-spacer>
                        <v-btn flat>全部已读</v-btn>
                    </v-layout>
                    <v-divider></v-divider>

                    <v-list class="pa-0">
                        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                            <div v-for="(item,index) in notices" :key="index" class="myListItem" slot="activator" @click="dialog = true">
                                <v-list-tile style="padding: 10px 14px;">
                                    <v-avatar size="10" color="blue"></v-avatar>
                                    <div style="font-size: 14px;color: #252631;margin-left: 20px">
                                        审核通过
                                    </div>
                                    <v-spacer></v-spacer>
                                    <div style="color: #98a9bc;margin-right: 18px;font-size: 12px">2018-9-21 13:24</div>
                                </v-list-tile>
                                <v-divider
                                        style="margin-left: 30px;margin-right: 30px;color: rgb(234,237,243)"></v-divider>
                            </div>

                        </div>
                    </v-list>
                </div>
                <div v-if="busy">正在加载....</div>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
    export default {
        name: 'Notices',
        data () {
            return {
                // 是否正在加载过程中
                busy: false,
                dialog: false,
                page: 1,
                pageSize: 8,
                notices: [
                    {title: '', time: '', status: ''},
                ],

            };
        },
        methods: {
            loadMore: function () {
                this.busy = true;
                setTimeout(() => {
                    for (let i = 0, j = 10; i < j; i++) {
                        this.notices.push({title: '', time: '', status: ''});
                    }
                    this.busy = false;
                }, 1000);
            },
        },
    };
</script>

<style scoped>

</style>
